<template>
  <div class="login-box">
    <div
      style="margin-left: 10%; margin-top: 10%; width: 80%; border-radius: 20px"
    >
      <!-- <img src="../../static/讨论.png" style="width: 100%" /> -->

      <Input
        v-model="username"
        placeholder="请输入账号"
        style="width: 60%"
        size="large"
      />
      <!-- <input v-model="password" placeholder="请输入密码" /><br /> -->
      <Input
        v-model="password"
        type="password"
        password
        placeholder="请输入密码"
        style="width: 60%"
        size="large"
      />
      <div
        style="
          margin-left: 35%;
          margin-top: 20px;
          float: left;
          width: 30%;
          height: 15%;
        "
      >
        <Button
          @click="register"
          type="default"
          size="large"
          style="width: 100%"
          >注册</Button
        >
      </div>

      <!-- <button @click="loginSumbit">登陆</button> -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'LoginAuth',
  data () {
    return {
      username: '',
      password: ''
      // msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    register: function () {
      if (this.username.trim() === '' || this.password.trim() === '') {
        this.$Message.error('不能为空!')
        return
      }
      var _this = this // 临时变量
      this.$axios({
        method: 'post',
        url: '/register',
        data: {
          username: this.username,
          password: this.password
        }
      }).then(function (response) {
        if (response.data.code === 1) {
          _this.$Message.info('注册成功!')
          _this.$router.push('/LoginAuth')
        } else {
          _this.$Message.error('注册失败!')
        }
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.login-box {
  margin: 5% auto;
  height: 200px;
  width: 20%;
  background: white;
  border: gray solid 1px;
  border-radius: 30px;
}
</style>
